<template>
    <view class="gy-rate">
        <view
            class="gy-rate-item gy_icon_collect_full"
            :class="[props.modelValue >= item ? 'selected' : '']"
            :style="{fontSize: props.size + 'rpx'}"
            v-for="item in 5"
            :key="item"
			@click.stop="selectFn(item)"></view>
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>
	
	const emits = defineEmits(["update:modelValue"]);
	
    const props = defineProps({
    	modelValue: {
    		type: Number,
            default: 0
    	},
		onlyRead: {
			type: Boolean,
		    default: false
		},
        size: {
        	type: Number,
            default: 28
        }
    });
	
	function selectFn(rate: number){
		if(!props.onlyRead){
			emits("update:modelValue", rate);
		}
	}
</script>

<style lang="scss" scoped>
	.gy-rate{
	    @include flex-center-center;
	    display: inline-flex;
	    .gy-rate-item{
	        color: var(--el-text-color-disabled);
	    }
	    .gy-rate-item.selected{
	        color: var(--gy-color-warning);
	    }
	    .gy-rate-item+.gy-rate-item{
	        margin-left: 0.5em;
	    }
	}
	
</style>